<template>
	<van-popup v-model:show="show" class="pd40 popup" round closeable @click-close-icon="show = false">
		<van-tabs v-model:active="active" class="mgb20">
			<van-tab title="甲方问题" v-if="props.roles != 0"></van-tab>
			<van-tab title="工作组问题" v-if="props.roles != 2"></van-tab>
		</van-tabs>
		<view class="mgb40 fwb verticalRight">
			问题详情
			<!-- <view class="verticalRight"></view> -->
		</view>
		<card :user="user" :funK="showQuesKuang"></card>
		<reCard :replyList="replyList" :funK="showQuesKuang" />
	</van-popup>
	<van-popup v-model:show="showQ" class="pd20 anspop" round>
		<view class="reBox text">
			<view class="flex aic">
				<text class="mgr20">回复</text>
				<view class="flex aic">
					<image :src="reData.avatar" mode="aspectFill" class="avatar"></image>
					<view class="">{{ reData.name }}</view>
				</view>
			</view>
			<view class="tell">{{ reData.content }}</view>
		</view>
		<van-field v-model="message" rows="5" label="回复内容" type="textarea" placeholder="请输入留言" class="mgt40" maxlength="300" label-align="top" />
		<view class="mgt40 flex jce">
			<van-button type="primary" class="mgr20" @click="toRecome">确定</van-button>
			<van-button type="default" @click="showQ = false">取消</van-button>
		</view>
	</van-popup>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import card from './msgCard.vue';
import reCard from './replyCard.vue';
const props = defineProps({
	rowData: {
		default: {}
	},
	roles: {
		default: 0
	}
});
const show = ref(false);
const active = ref(0);
const user = reactive({
	avatar: '../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png',
	name: '342423',
	city: '广东省',
	createDate: '2020-2-2',
	content: '我说了啥，你就是啥',
	img: '../../uni_modules/uni-id-pages/static/app-plus/uni-fab-login/sinaweibo.png'
});
const replyList = reactive([
	{
		name: 'lily',
		city: '广东省',
		avatar: '../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png',
		reply: '342423',
		content: 'cuuuuuuuuuu',
		createDate: '2022-1-1',
		img: '../../uni_modules/uni-id-pages/static/app-plus/uni-fab-login/sinaweibo.png'
	},
	{ name: 'lily', city: '广东省', avatar: '../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png', reply: '342423', content: 'cuuuuuuuuuu', createDate: '2022-1-1' },
	{ name: 'lily', city: '广东省', avatar: '../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png', reply: '342423', content: 'cuuuuuuuuuu', createDate: '2022-1-1' },
	{ name: 'lily', city: '广东省', avatar: '../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png', reply: '342423', content: 'cuuuuuuuuuu', createDate: '2022-1-1' },
	{
		name: 'lily',
		city: '广东省',
		avatar: '../../uni_modules/uni-id-pages/static/login/uni-fab-login/user.png',
		reply: '342423',
		content:
			'cuuuuuasffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffuuuuu',
		createDate: '2022-1-1'
	}
]);
let showQ = ref(false);
let reData = reactive({});
defineExpose({
	show
});
// 打开回复
let message = ref('');
function showQuesKuang(e) {
	// console.log(e);
	reData = e;
	message.value = '';
	showQ.value = true;
}

function toRecome() {
	showQ.value = false;
	message.value = '';
}
</script>

<style>
.popup {
	min-height: 1000rpx;
	scrollbar-width: none;
}
.verticalRight {
	&::after {
		content: '1';
		width: 1rpx; /* 竖线的宽度 */
		height: 100%; /* 竖线的高度 */
		background-color: #ffaa00; /* 竖线的颜色 */
		color: #ffaa00;
	}
}
.reBox {
	width: 800rpx;
	padding: 30rpx;
	border: 1px solid #999;
	border-radius: 20rpx;
	.avatar {
		width: 60rpx;
		height: 60rpx;
		border: 1px solid #eee;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}
	.tell {
		width: 600rpx;
		word-wrap: break-word;
		margin-top: 30rpx;
		font-size: 28rpx;
		text-indent: 2rem;
	}
}
@media (max-width: 375px) {
	.anspop {
		width: 680rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.reBox {
		width: 500rpx;
	}
}
</style>
